<template>
  <el-dialog
    title="知识库"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      class="query-more-form"
      size="mini"
      label-width="100px"
      :model="query"
    >
      <el-row :gutter="20" class="top1">
        <el-col :span="18"
          ><el-form-item label="关键词" prop="threeType" class="threeType"
            ><el-input
              v-model="query.keyword"
              ref="threeType"
              placeholder="请输入知识库关键字"
              maxlength="255" /></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-button size="mini" class="submit-btn" @click="openThreeType"
            >查询</el-button
          ></el-col
        >
      </el-row>
    </el-form>

    <!-- 数据展示 -->
    <el-table
      border
      size="small"
      :data="getAllData"
      height="300px"
      style="width: 100%"
    >
      <el-table-column prop="number" label="编号" show-overflow-tooltip />
      <el-table-column
        prop="title"
        label="标题"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="deptValue"
        label="来源部门"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="subClassCompleteName"
        label="大类"
        show-overflow-tooltip
        width="140"
      />
      <el-table-column
        prop="subClassName"
        label="小类"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="categoryDcaName"
        width="130"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>
            {{ parseTime(scope.row.createTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        show-overflow-tooltip
        width="230"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">点击复制</div>
            <span
              style="display: block; cursor: pointer"
              class="tag-read"
              :data-clipboard-text="scope.row.content"
              @click="copy"
              >{{ scope.row.content }}</span
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-panel">
      <Pagination
        :total="query.total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="openThreeType"
      />
    </div>
  </el-dialog>
</template>
<script>
import { knowledgeMsg } from "@/api/knowledgeBase.js";
import { parseTime } from "@/utils/index";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      getAllData: [],
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        keyword: null,
      },
    };
  },
  components: {
    Pagination,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    parseTime,
    handleClose() {
      this.$emit("closeDialog");
      this.query = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        keyword: null,
      };
      this.getAllData = [];
    },

    copy() {
      var clipboard = new this.Clipboard(".tag-read");
      clipboard.on((e) => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },

    openThreeType() {
      if (!this.query.keyword) {
        this.$message.error("请输入你要查询的内容!");
      } else {
        knowledgeMsg(this.query)
          .then((result) => {
            let { rows, code } = result;
            if (code == 200) {
              this.getAllData = rows;
              this.query.total = result.total;
            }
          })
          .catch();
      }
    },
  },
  mounted() {
    // let ele = this._elementRef.nativeElement.querySelector(".content");
    // console.log(ele)
  },
};
</script>
<style scoped lang="scss">
.pagination-panel {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .pagination-container {
    padding-bottom: 0;
    margin-top: 10px;
  }
}
</style>